<template>
  <div>
    <el-button type="primary" size="small" @click="addGroup"
      >添加小组</el-button
    >
    <el-row v-loading="config.loading" class="table-container">
      <empty v-if="!groupList || groupList.length === 0" />
      <div v-else class="group-list">
        <div v-for="item in groupList" :key="item.id" class="group-li">
          <div class="group-li__header">
            <div class="group-li__header-text">
              {{ item.title }}
            </div>
            <div>
              <el-button type="primary" size="small" @click="addDirector(item)"
                >添加科室</el-button
              >
              <el-button
                v-if="!item._child || item._child.length === 0"
                type="danger"
                size="small"
                @click="delGroup(item)"
                >删除小组</el-button
              >
            </div>
          </div>
          <div class="group-li__content">
            <empty v-if="!item._child || item._child.length === 0" />
            <div v-else class="director-list">
              <div
                v-for="director in item._child"
                :key="director.id"
                class="director-li"
              >
                <div>
                  <span class="director-li__title">{{
                    director.orgPost_title
                  }}</span>
                  <div class="director-li__content">
                    <span
                      v-if="!director._child || director._child.length === 0"
                      >该科室还没有成员</span
                    >
                    <template v-for="(tag, index) in director._child">
                      <el-tag
                        :key="tag.name"
                        size="small"
                        :type="tag.role === 'section' ? '' : 'info'"
                        closable
                      >
                        {{ tag.name }}（{{ tag.role_name }}）
                      </el-tag>
                      <el-divider
                        v-if="index + 1 !== director._child.length"
                        :key="tag.name"
                        direction="vertical"
                      ></el-divider>
                    </template>
                  </div>
                </div>
                <div class="director-li__button-box">
                  <el-button
                    type="text"
                    size="small"
                    @click="delDirector(director)"
                    >详情</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="delDirector(director)"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <abstract-pagination
        :model="searchForm"
        :page-sizes="[2, 4]"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      />
    </el-row>
  </div>
</template>

<script>
import Empty from '@/components/Empty'
import AbstractPagination from '@/components/abstract/Pagination'

export default {
  name: 'GroupManage',

  components: {
    Empty,
    AbstractPagination
  },

  data: () => ({
    searchForm: {
      page: 1,
      pageSize: 10,
      total: 0
    },
    config: {
      loading: false
    },
    groupList: [
      {
        title: '小组1',
        _child: [
          {
            orgPost_title: '科室1',
            _child: [
              {
                name: '主任1',
                role_name: '科室主任',
                role: 'section'
              },
              {
                name: '科员1',
                role_name: '科员'
              },
              {
                name: '科员2',
                role_name: '科员'
              },
              {
                name: '科员3',
                role_name: '科员'
              },
              {
                name: '科员4',
                role_name: '科员'
              }
            ]
          },
          {
            orgPost_title: '科室2',
            _child: [
              {
                name: '主任1',
                role_name: '科室主任',
                role: 'section'
              },
              {
                name: '科员1',
                role_name: '科员'
              },
              {
                name: '科员2',
                role_name: '科员'
              },
              {
                name: '科员3',
                role_name: '科员'
              }
            ]
          }
        ]
      }
    ]
  }),

  methods: {
    pageChange() {},

    pageSizeChange() {},

    addGroup() {}
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/var.scss';

.group-list {
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  .group-li {
    border: 1px solid #ebeef5;
    border-radius: 3px;
    &__header {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background: #fafafa;
    }

    &__header-text {
      font-weight: 600;
    }

    &__content {
      padding: 15px;
    }
  }
}

.director-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;

  .director-li {
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
    &__button-box {
      //   float: right;
      text-align: right;
    }

    &__title {
      font-size: 15px;
    }

    &__content {
      padding: 10px 0;
      font-size: 14px;
    }
  }
}

.frame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

  &__left {
    a {
      color: $--color-primary;
    }
  }
}
</style>

<style>
.el-tag {
  margin: 2.5px 0;
}
</style>
